<template>
  <BaseLayout>
    <RadioButton
      name="engineer"
      :data="radioData"
      v-model="checked"
      :verticle="false"
      mode="box"
    />

    <s-form ref="form" :model="formModel" :rules="formRules" hide-required-mark>
      <s-form-item label="用户名" prop="username">
        <s-input v-model="formModel.username" />
      </s-form-item>
      <s-form-item label="密码" prop="password">
        <s-input v-model="formModel.password" />
      </s-form-item>
      <s-form-item prop="hobby">
        <s-checkbox v-model="formModel.hobby">swimming</s-checkbox>
      </s-form-item>
      <s-form-item label="科目" prop="subjects">
        <s-checkbox-group v-model="formModel.subjects">
          <s-checkbox label="math" />
          <s-checkbox label="chinese" />
          <s-checkbox label="english" />
        </s-checkbox-group>
      </s-form-item>
      <s-form-item label="性别" prop="gender">
        <s-radio-group v-model="formModel.gender">
          <s-radio label="男" />
          <s-radio label="女" />
        </s-radio-group>
      </s-form-item>
      <s-form-item>
        <button type="button" @click="handleSubmit">submit</button>
        <button type="button" @click="handleReset">reset</button>
      </s-form-item>
    </s-form>

    <button @click="handleShowMessage">显示message</button>

    <s-table :columns="columns" :data="data">
      <template #birthday="{row}">{{ convertDate(row) }}</template>
    </s-table>

    <s-tree :data="treeData" :showCheckbox="true" />
  </BaseLayout>
</template>

<script>
import { mapApi } from '_library/tools'
import {
  SForm,
  SFormItem,
  SInput,
  SCheckbox,
  SCheckboxGroup,
  SRadio,
  SRadioGroup,
  SMessage,
  STable,
  STree,
} from '@skyui'

export default {
  name: 'Home',
  components: {
    SForm,
    SFormItem,
    SInput,
    SCheckbox,
    SCheckboxGroup,
    SRadio,
    SRadioGroup,
    STable,
    STree,
  },
  data() {
    return {
      count: 0,
      checked: '0',
      radioData: [
        {
          label: '前端工程师',
          value: '0',
        },
        {
          label: '后端工程师',
          value: '1',
        },
        {
          label: '全栈工程师',
          value: '2',
        },
      ],

      formModel: {
        username: '',
        password: '',
        hobby: true,
        subjects: ['math'],
        gender: '',
      },
      formRules: {
        username: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
          },
          {
            required: true,
            message: '密码（input）不能为空',
            trigger: 'change',
          },
        ],
        hobby: [
          {
            required: true,
            type: 'boolean',
            message: '兴趣必选',
            trigger: 'change',
          },
        ],
        subjects: [
          {
            required: true,
            type: 'array',
            message: '科目必选',
            trigger: 'change',
          },
        ],
        gender: [{ required: true, message: '性别必填', trigger: 'change' }],
      },

      columns: [
        {
          title: '姓名',
          key: 'name',
        },
        {
          title: '年龄',
          key: 'age',
        },
        {
          title: '出生日期',
          key: 'birthday',
          slot: 'birthday',
          // render: (h, { row, column, index }) => {
          //   const date = new Date(parseInt(row.birthday))
          //   const year = date.getFullYear()
          //   const month = date.getMonth() + 1
          //   const day = date.getDate()

          //   const birthday = `${year}-${month}-${day}`

          //   return <span>{birthday}</span>
          // },
        },
        {
          title: '地址',
          key: 'address',
        },
        {
          title: '操作',
        },
      ],
      data: [
        {
          name: '王小明',
          age: 18,
          birthday: '919526400000',
          address: '北京市朝阳区芍药居',
        },
        {
          name: '张小刚',
          age: 25,
          birthday: '696096000000',
          address: '北京市海淀区西二旗',
        },
        {
          name: '李小红',
          age: 30,
          birthday: '563472000000',
          address: '上海市浦东新区世纪大道',
        },
        {
          name: '周小伟',
          age: 26,
          birthday: '687024000000',
          address: '深圳市南山区深南大道',
        },
      ],

      treeData: [
        {
          title: 'parent 1',
          expand: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1',
                },
                {
                  title: 'leaf 1-1-2',
                },
              ],
            },
            {
              title: 'parent 1-2',
              children: [
                {
                  title: 'leaf 1-2-1',
                },
                {
                  title: 'leaf 1-2-1',
                },
              ],
            },
          ],
        },
        {
          title: 'parent 2',
          expand: true,
          children: [
            {
              title: 'parent 2-1',
              expand: true,
              children: [
                {
                  title: 'leaf 2-1-1',
                },
                {
                  title: 'leaf 2-1-2',
                },
              ],
            },
            {
              title: 'parent 2-2',
              children: [
                {
                  title: 'leaf 2-2-1',
                },
                {
                  title: 'leaf 2-2-1',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  created() {},
  mounted() {
    // this.queryApplyByName()
    this.$get('queryApplyByName', null, { loading: true }).then(res => {
      console.log(res)
    })
  },
  methods: {
    ...mapApi(['queryApplyByName']),

    handleSubmit() {
      this.$refs.form.validate().then(res => {
        // console.log(res)
      })
    },
    handleReset() {
      this.$refs.form.resetFields()
    },

    handleShowMessage() {
      SMessage.info({
        content: `显示哈${this.count++}`,
        duration: 5,
      })
    },

    convertDate(row) {
      const date = new Date(parseInt(row.birthday))
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const birthday = `${year}-${month}-${day}`
      return birthday
    },
  },
}
</script>

<style></style>
